<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层次选择器</title>
	</head>
	<script type="text/javascript" src="jquery-3.1.4.js">
		
	</script>
	<style type="text/css">
		#box1{
			width: 500px;
			height: 500px;
			border: solid 1px black;
		}	
		#box2{
			width: 200px;
			height: 200px;
			border: solid 1px yellow;
		}
		#box3{
			width: 50px;
			height: 50px;
			border: solid 1px green;
		}
		#box4{
			width: 50px;
			height: 50px;
			border: solid 1px red;
		}
		#box5{
			width: 500px;
			height: 500px;
			border: solid 1px black;
		}
		#box6{
			width: 500px;
			height: 500px;
			border: solid 1px black;
		}
	</style>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3">
			
				</div>
			</div>
			<div id="box4">
			
			</div>
		</div>
		<div id="box5">
			
		</div>
		<div id="box6">
			
		</div>
		<input type="button" id="button" value="请点击我" />
		<script type="text/javascript">
			$("#button").click(function(){
				// box1 下的所有子标签 仅限儿子辈的
				//$("#box1>div").css("border","solid black 3px");
				// box1 下的所有子标签，包括儿子孙子辈
				//$("#box1 div").css("border","solid black 3px");
				// box1的最近一个同级标签
				//$("#box1+div").css("border","solid black 3px");
				// box1相旁边的几个标签
				$("#box1~div").css("border","solid black 3px");
			})
		</script>
	</body>
</html>
